<template>
  <section
    :style="{background:background}"
    class="nav-bar"
  >
    <div
      :style="{
        height:statusBarHeight + 46 +  'px',
        boxShadow: background ?  'none' : '',
      }"
      class="nav-bar-wrap">
      <nav class="bar">
        <div class="left">
          <img
            class="img"
            @tap="NavigateBack"
            alt=""
            src=""
            v-show="backShow"
            v-if="!color"
          />
          <img
            class="img"
            @tap="NavigateBack"
            src=""
            alt=""
            v-else
          >
        </div>

        <span :style="{color}" class="text">
         <slot></slot>
        </span>

        <div class="right">
          <slot name="right"></slot>
        </div>
      </nav>

    </div>

  </section>
</template>

<script>
  import { NavigateBack } from "../../utils/router";

  export default {
    name: "nav-bar",
    props: {
      showBack: {
        type: Boolean,
        default: true
      },
      // 背景颜色
      background: {
        type: String,
        default: ''
      },
      // 字体颜色
      color: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        statusBarHeight: ''
      }
    },
    computed: {
      backShow() {
        if (this.showBack) {
          return getCurrentPages().length > 1;
        } else {
          return this.showBack
        }
      }
    },
    created() {
      uni.getSystemInfo({
        success: res => {
          this.statusBarHeight = res.statusBarHeight;
        },
      });
    },
    methods: {
      NavigateBack
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../uni";

  .nav-bar {
    position: relative;
    background: linear-gradient(309deg, rgba(9, 182, 188, 1) 0%, rgba(0, 224, 180, 1) 100%);

    &-wrap {
      width: 100vw;

      box-shadow: 0 upx(8) upx(16) 0 rgba(8, 186, 187, 0.5);

      .bar {
        width: 100%;
        padding: 0 upx(40);
        box-sizing: border-box;

        display: flex;
        justify-content: space-between;
        align-items: center;
        position: absolute;
        bottom: upx(26);
        margin: auto;
      }

      div.left {
        width: 25%;

        .img {
          width: upx(40);
          height: upx(40);
        }
      }

      .text {
        @include ft(36, #fff, 500);

      }

      div.right {
        width: 25%;
        text-align: right;
        @include ft(30, #fff, 400);

      }
    }
  }
</style>
